<template>
  <div class="app-container">
    <el-dialog
      title="配置信息"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <el-form
        ref="appConfigForm"
        :model="form"
        :rules="rules"
        :label-width="formLabelWidth"
        v-loading="loading"
      >
        <el-form-item label="终端序列号" prop="deviceSerialNo">
          <el-input v-model="form.deviceSerialNo" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="设备集成平台地址" prop="eipUrl">
          <el-input v-model="form.eipUrl" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item v-if="false" label="终端类型" prop="deviceType">
          <el-select v-model="form.deviceType" placeholder="请选择终端类型">
            <el-option
              v-for="item in deviceTypes"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="setAppConfig">注册</el-button>
        <el-button type="info" @click="dialogFormVisible = false"
          >取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'AppConfigForm',
  // components: { Tinymce },
  data() {
    return {
      loading:false,
      dialogFormVisible: false,
      formLabelWidth: '180px',
      form: {
        deviceSerialNo: '',
        deviceType: '',
        eipUrl: '',//Equipment integration platform 设备集成平台地址
        desc: '',
      },
      deviceTypes: [
        {
          id: 'CMSAutoCreate',
          value: 'Auto Create进闸终端',
        },
        {
          id: 'CMSAuto',
          value: 'CMS自动终端',
        },
        {
          id: 'CMSManualOSD',
          value: 'CMS手工终端',
        },
        {
          id: 'CMSManualSSD',
          value: 'CMS手工安保部终端',
        },
        {
          id: 'ToTGPS',
          value: '进闸TGPS刷卡终端',
        },
        {
          id: 'GateOutAuto',
          value: '空架车自动出闸终端',
        },
        {
          id: 'GateOutManual',
          value: '手工出闸终端',
        },
      ],
      rules: {
        deviceSerialNo: [
          { required: true, message: '请输入终端序列号', trigger: 'blur' },
          {
            min: 6,
            max: 32,
            message: '长度在 6 到 32 个字符',
            trigger: 'blur',
          },
        ],
        eipUrl: [
          { required: true, message: '请输入设备集成平台地址', trigger: 'blur' },
          {
            min: 12,
            max: 32,
            message: '长度在 12 到 32 个字符',
            trigger: 'blur',
          },
        ],
        deviceType: [
          { required: true, message: '请选择设备类型', trigger: 'change' },
        ],
      },
    }
  },
  created() {},
  methods: {
    show() {
      this.dialogFormVisible = true
    },
    setAppConfig() {
      this.$refs.appConfigForm.validate((valid) => {
        if (valid) {
          this.loading = true
          setTimeout(() => {
            // this.loading = false
            //将配置信息写入
            this.$emit('flushAppConfig', this.form)
            // this.dialogFormVisible = false
          }, 1000)
        }
      })
    },
  },
}
</script>

<style scoped>
.line {
  text-align: center;
}
</style>
